<template xmlns="http://www.w3.org/1999/html">
  <div id="app">
    <el-card
        style="width: 100%;">
      <div slot="header" class="clearfix">
        <span>机械设计</span>
        <el-button type="text" style="float: right; padding: 3px 0" @click="drawer = true">查看评审</el-button>
      </div>
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            负责人
          </template>
          <el-input></el-input>
        </el-descriptions-item>
        <el-descriptions-item span="2">
          <template slot="label">
            <i class="el-icon-user"></i>
            协作人
          </template>
          <el-input></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-alarm-clock"></i>
            开始日期
          </template>
          <el-input></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-alarm-clock"></i>
            计划完成日期
          </template>
          <el-input></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-alarm-clock"></i>
            实际完成日期
          </template>
          <el-input></el-input>
        </el-descriptions-item>
        <el-descriptions-item span="3">
          <template slot="label">
            <i class="el-icon-office-building"></i>
            工作内容和要求
          </template>
          <el-input></el-input>
        </el-descriptions-item>

        <el-descriptions-item span="2">
          <template slot="label">
            <i class="el-icon-office-building"></i>
            设计输入文件
          </template>
          <el-button type="text">上传</el-button>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>


    <el-card>
      <div slot="header" class="clearfix"><span>一级标题</span></div>
      <el-card class="box-card" v-for="(card, cardIndex) in cards" :key="cardIndex" shadow="never">
        <div slot="header" class="clearfix">
          <span>{{ card.title }}</span>
          <el-button type="text" style="float: right; padding: 3px 0" @click="showComment = !showComment">查看评论
          </el-button>
          <el-button type="text" style="float: right; padding: 3px 0">提交</el-button>
          <el-button v-if="cardIndex !== 0" style="float: right; padding: 3px 0" type="text"
                     @click="removeCard(cardIndex)">删除此节点
          </el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click="addSubTask()">创建子任务</el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click='alert("发起当前节点评审")'>发起评审</el-button>
        </div>
        <el-form ref="form" :model="schemeForm" label-width="120px">
          <el-row>
            <el-col :span="16">
              <el-form-item label="工作内容和要求">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-upload>
                  <el-button type="text"><i class="el-icon-upload">附件</i></el-button>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="6"></el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="负责人">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划完成日期">
                <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实际完成日期">
                <el-date-picker
                    v-model="value2"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item v-if="showComment">
                <el-timeline style="border:1px solid #cecece; padding: 20px; padding-bottom: 0;">
                  <el-timeline-item v-for="(comment, index) in comments" :key="index" :timestamp="comment.timestamp"
                                    placement="top">
                    <el-card shadow="never">
                      <span>{{ comment.author }}</span><span>:</span><h4 style="display: inline; padding:0  40px">
                      {{ comment.content }}</h4><i class="el-icon-paperclip" style="color: #409eff">**客户**需求.pdf</i>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
                <el-button type="text" @click="showCommentDailog = true">评论</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item>
                <el-card v-for="(subTask, index) in subTasks" :key="index" shadow="never">
                  <div slot="header" class="clearfix">
                    <span>{{ subTask.title }}</span>
                    <el-button type="text" style="float: right; padding: 3px 0"
                               @click="showSubComment = !showSubComment">
                      查看评论
                    </el-button>
                    <el-button type="text" style="float: right; padding: 3px 0">提交</el-button>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="removeSubTask(index)">删除此任务
                    </el-button>
                    <el-button style="float: right; padding: 3px 0" type="text" @click='alert("发起当前节点评审")'>发起评审
                    </el-button>
                  </div>
                  <el-form ref="form" :model="schemeSubForm" label-width="120px" size="mini">
                    <el-form-item label="工作内容和要求">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="负责人">
                      <el-input style="width: 35%"></el-input>
                    </el-form-item>
                    <el-form-item label="计划完成日期">
                      <el-date-picker
                          v-model="value3"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="实际完成日期">
                      <el-date-picker
                          v-model="value4"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item v-if="showSubComment">
                      <el-timeline style="border:1px solid #cecece; padding: 20px; padding-bottom: 0;">
                        <el-timeline-item v-for="(comment, index) in subComments" :key="index"
                                          :timestamp="comment.timestamp"
                                          placement="top">
                          <el-card shadow="never">
                            <span>{{ comment.author }}</span><span>:</span><h4
                              style="display: inline; padding-left: 20px">
                            {{ comment.content }}</h4>
                          </el-card>
                        </el-timeline-item>
                      </el-timeline>
                      <el-button type="text" @click="showSubCommentDailog = true">评论</el-button>
                    </el-form-item>
                  </el-form>
                </el-card>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-drawer
            title="评审标题(展示此页面所有节点、子节点中的评审信息)"
            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleClose">
          <el-card class="box-card" style="margin: 20px 0">
            <el-descriptions title="方案评审" class="margin-top" direction="vertical" :column="2" border>
              <el-descriptions-item label="评审人员">张三、李四</el-descriptions-item>
              <el-descriptions-item label="评审原件">文件附件</el-descriptions-item>
              <el-descriptions-item label="评审意见">部分修改</el-descriptions-item>
              <el-descriptions-item label="评审结果">
                <el-tag size="small">通过</el-tag>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="评审标题（来源于自定义节点中的评审）" class="margin-top" direction="vertical" :column="2" border
                             style="margin-top: 30px">
              <el-descriptions-item label="评审人员">王五、赵六</el-descriptions-item>
              <el-descriptions-item label="评审原件">文件附件</el-descriptions-item>
              <el-descriptions-item label="评审意见">部分修改</el-descriptions-item>
              <el-descriptions-item label="评审结果">
                <el-tag size="small">修改</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-drawer>
        <el-dialog :visible.sync="showCommentDailog" title="发表评论">
          <el-form ref="commentForm" :model="commentForm">
            <el-form-item label="评论内容">
              <el-input v-model="commentForm.content">
                <el-button slot="append"><i class="el-icon-picture-outline"></i></el-button>
                <el-button slot="append"><i class="el-icon-paperclip"></i></el-button>
              </el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button @click="showCommentDailog=false" type="warning">取消</el-button>
              <el-button @click="submitComment()" type="primary">发表</el-button>
          </span>
        </el-dialog>
        <el-dialog :visible.sync="showSubCommentDailog" title="发表评论">
          <el-form ref="subCommentForm" :model="subCommentForm">
            <el-form-item label="评论内容">
              <el-input v-model="subCommentForm.content"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button @click="showSubCommentDailog=false" type="warning">取消</el-button>
              <el-button @click="submitSubComment()" type="primary">发表</el-button>
          </span>
        </el-dialog>
      </el-card>
      <el-button @click="showAddNodeDialog" type="primary" size="small">创建节点</el-button>
      <el-input v-model="newCardTitle" placeholder="请输入新设计节点的标题" style="width: 35%" size="small"></el-input>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>投产</span>
        <el-button style="float: right; padding: 3px 0" type="text">提交</el-button>
      </div>
      <el-descriptions class="margin-top" :column="2" border>

        <el-descriptions-item>
          <template slot="label">
            加工装配附件
          </template>
          <el-upload style="width: 400px">
            <el-button type="text"><i class="el-icon-paperclip"></i></el-button>
          </el-upload>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            外购件附件
          </template>
          <el-upload style="width: 400px">
            <el-button type="text"><i class="el-icon-paperclip"></i></el-button>
          </el-upload>
        </el-descriptions-item>

        <el-descriptions-item span="2">
          <template slot="label">
            投产树形结构图
          </template>
          <div style="display: flex; justify-content: left; align-items: center;">
            <el-input style="width: 400px"
                      placeholder="输入关键字进行过滤"
                      v-model="filterText">
            </el-input>
            <el-button type="text">转发</el-button>
            <el-button type="text">导出</el-button>
          </div>
          <div class="table">
            <el-scrollbar style="height: 80%; background-color: #fff">
              <el-tree
                  show-checkbox
                  :check-on-click-node="true"
                  :data="allMenu"
                  default-expand-all
                  node-key="id"
                  :expand-on-click-node="false"
                  :props="menuProps"
                  ref="menuTree"
                  :check-strictly="true">
              </el-tree>
            </el-scrollbar>
          </div>

        </el-descriptions-item>

        <el-descriptions-item span="4" style="padding: 20px">
          <template slot="label">
            <i class="el-icon-office-building"></i>
            审批信息
          </template>
          <el-steps :active="2" style="margin: 20px">
            <el-step title="设计负责人" description="李四"></el-step>
            <el-step title="部门经理" description="王五"></el-step>
            <el-step title="设备部经理" description="张三"></el-step>
            <el-step title="总经理" description="胡八"></el-step>
            <el-step title="其他人员" description="ABC"></el-step>
          </el-steps>
          <el-timeline style="border:1px solid #cecece; margin: 20px; padding: 20px; padding-bottom: 0;">
            <el-timeline-item v-for="(comment, index) in comments" :key="index" :timestamp="comment.timestamp"
                              placement="top">
              <el-card shadow="never">
                <span>{{ comment.author }}</span><span>:</span><h4 style="display: inline; padding:0  40px">
                {{ comment.content }}</h4><i class="el-icon-paperclip" style="color: #409eff">一些说明.docx</i>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <el-button type="text" @click="showCommentDailog = true">发表评论</el-button>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>


    <el-card class="box-card" style="margin: 20px 0px 100px 0px">
      <div slot="header" class="clearfix">
        <span>设计更改</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="dialogChangeVisible=true">增加</el-button>
        <el-button style="float: right; padding: 3px 0" @click="removeChanges(index)" type="text">删除</el-button>
      </div>
      <el-table :data="tableChangesData" stripe="true" @selection-change="handleSelectionChange">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-descriptions :column="2" border>
                  <el-descriptions-item>
                    <template slot="label">更改内容及原因</template>
                    {{ scope.row.content }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">审批进度</template>
                    <el-steps :active="2">
                      <el-step title="设计负责人" description="李四"></el-step>
                      <el-step title="部门经理" description="王五"></el-step>
                      <el-step title="设备部经理" description="张三"></el-step>
                      <el-step title="总经理" description="胡八"></el-step>
                      <el-step title="其他人员" description="ABC"></el-step>
                    </el-steps>
                  </el-descriptions-item>
                  <el-descriptions-item :span="2">
                    <template slot="label">评论信息</template>
                    <el-timeline style="padding: 20px; padding-bottom: 0;">
                      <el-timeline-item v-for="(comment, index) in comments" :key="index" :timestamp="comment.timestamp"
                                        placement="top">
                        <el-card shadow="never">
                          <span>{{ comment.author }}</span><span>:</span><h4 style="display: inline; padding:0  40px">
                          {{ comment.content }}</h4><i class="el-icon-paperclip" style="color: #409eff">**客户**需求.pdf</i>
                        </el-card>
                      </el-timeline-item>
                    </el-timeline>
                    <el-button type="text" @click="showCommentDailog = true">评论</el-button>
                  </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column label="零件名称" prop="id">
        </el-table-column>
        <el-table-column label="图号" prop="name">
        </el-table-column>
        <el-table-column label="图纸负责人" prop="desc">
        </el-table-column>
        <el-table-column label="时间" prop="time">
        </el-table-column>
        <el-table-column label="文件" prop="file">
        </el-table-column>
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="新增图纸更改" :visible.sync="dialogChangeVisible">
      <el-form label-width="120px" :model="changesForm" label-position="left" size="small" :inline="true"
               class="demo-form-inline" v-for="(item, index) in changesForm" :key="index" style="margin: 20px 0">
        <el-form-item label="零件名称">
          <el-input v-model="changesForm.part"></el-input>
        </el-form-item>
        <el-form-item label="图号">
          <el-input v-model="changesForm.sn"></el-input>
        </el-form-item>
        <el-form-item label="图纸负责人">
          <el-input v-model="changesForm.head"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-input v-model="changesForm.time"></el-input>
        </el-form-item>
        <el-form-item label="更改内容及原因">
          <el-input v-model="changesForm.content"></el-input>
        </el-form-item>
        <el-form-item label="文件">
          <el-upload>
            <el-button type="text"><i class="el-icon-check"></i>上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addChanges()" type="primary" size="small">继续添加</el-button>
        <el-button @click="submitChanges()" type="primary" size="small">提交</el-button>
      </div>
    </el-dialog>
    <el-button type="success" @click="onSubmit()">完成</el-button>
  </div>
</template>

<script>
export default {
  name: "DesiginView",
  data() {
    return {
      labelPosition: 'left',
      newCardTitle: '',
      showComment: true,
      showCommentDailog: false,
      showSubComment: true,
      showSubCommentDailog: false,
      schemeForm: {},
      schemeSubForm: {},
      subTasks: [], // 子任务数组
      nextSubTaskId: 1,// 用于生成子任务的ID，确保key的唯一性
      comments: [{content: '示例评论内容', timestamp: '2024/3/4 8:56\n', author: '郭俊山'}],
      subComments: [{content: '子任务中的示例评论内容', timestamp: '2024/3/4 8:56\n', author: '郭俊山'}],
      commentForm: {content: '', timestamp: '', author: '当前用户'},
      subCommentForm: {content: '', timestamp: '', author: '张三'},
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      cards: [{title: '1.方案设计'}],
      drawer: false,
      direction: 'rtl',
      reviewForm: {},
      changesForm: [{}],
      tableChangesData: [
        {
          id: '3T机头', name: '1-0', desc: '张三', file: '图纸链接', time: '2024/04/09',
          content: '客户需求更改', step: '部门经理审核'
        }, {
          id: '横梁', name: '2-0', desc: '李四', file: '图纸链接', time: '2024/04/23',
          content: '客户要求', step: '总经理审批'
        }],
      dialogChangeVisible: false,
      defaultProps: {
        label: "menuname",
        children: "children",
      },
      filterText: '',
      allMenu: [
        {
          id: 1,
          label: "测试示例项目**装备",
          children: [
            {
              id: 2,
              label: "外协",
              children: [
                {
                  id: 4,
                  label: "机头",
                  children: [
                    {
                      id: 11,
                      label: "镜架",
                      children: [
                        {
                          id: 13,
                          label: "1-0铸件螺栓",
                        },
                        {
                          id: 14,
                          label: "1-1加工件横切面",
                        },
                        {
                          id: 15,
                          label: "1-2铸件底盘",
                        },
                      ]
                    },
                    {
                      id: 12,
                      label: "横滑轨",
                      children: [
                        {
                          id: 16,
                          label: "1-3加工件孔",
                        },
                        {
                          id: 17,
                          label: "1-4加工件ABC",
                        },
                      ]
                    },
                  ]
                },
                {
                  id: 5,
                  label: "横梁",
                  children: [
                    {
                      id: 18,
                      label: "1-5铸件底盘",
                    },
                    {
                      id: 19,
                      label: "1-6铸件机柜",
                    },
                  ]
                },
                {
                  id: 6,
                  label: "立柱",
                  children: []
                },
                {
                  id: 7,
                  label: "床身",
                  children: []
                },
              ] // 可以根据需要添加更多节点或留空
            },
            {
              id: 3,
              label: "外购",
              children: [
                {
                  id: 8,
                  label: "导轨",
                  children: [
                    {
                      id: 20,
                      label: "x向",
                    },
                    {
                      id: 21,
                      label: "y向",
                    },
                    {
                      id: 22,
                      label: "z向",
                    },
                  ]
                },
                {
                  id: 9,
                  label: "丝杠",
                  children: []
                },
                {
                  id: 10,
                  label: "风琴罩",
                  children: []
                },
              ] // 可以根据需要添加更多节点或留空
            }
          ]
        }
      ],
      tableData: [],
    }
  },
  watch: {
    // 监听权限菜单tree是否渲染完
    allMenu: function () {
      this.$nextTick(() => {
        this.changeTreeClass()
      })
    },
  },
  methods: {
    addSubTask() {
      // 添加子任务
      this.subTasks.push({
        id: this.nextSubTaskId++,
        title: `子任务 ${this.nextSubTaskId}`
      });
    },
    removeSubTask(index) {
      // 根据索引删除子任务
      this.subTasks.splice(index, 1);
    },
    showAddNodeDialog() {
      const newCard = {
        title: this.newCardTitle,
        schemeForm: {},
        subTasks: [],
      };
      this.cards.push(newCard);
    },
    removeCard(index) {
      // 从cards数组中移除指定索引的卡片
      this.cards.splice(index, 1);
    },
    addChanges() {
      // 假设productionForm是一个数组，每个元素对应一个表单项
      this.changesForm.push({});
    },
    removeChanges(index) {
      this.changesForm.splice(index, 1);
    },
    submitChanges() {
      // 假设changesForm是一个对象，而不是数组，因为你的表单似乎是单个对象
      // 如果changesForm实际上是一个数组，你可能需要调整这里的逻辑
      // 直接将表单数据添加到tableChangesData数组中
      this.tableChangesData.push({
        id: this.changesForm.part, // 假设part字段是零件名称
        name: this.changesForm.sn, // 假设sn字段是图号
        desc: this.changesForm.head, // 假设head字段是图纸负责人
        time: this.changesForm.time, // 时间
        content: this.changesForm.content, // 更改内容及原因
        file: '文件链接', // 假设你有一个方式来处理文件上传并获取链接
        step: '初始审批' // 假设这是新增项的默认审批进度
      });

      // 清空表单以便下一次添加
      this.changesForm = {};

      // 关闭对话框
      this.dialogChangeVisible = false;
    },
    submitComment() {
      const now = new Date();
      this.commentForm.timestamp = `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()} ${now.getHours()}:${now.getMinutes()}`;
      this.comments.push({...this.commentForm}); // 添加评论到时间线
      this.commentForm.content = ''; // 重置评论内容
      this.showCommentDailog = false; // 关闭对话框
    },
    submitSubComment() {
      const now = new Date();
      this.subCommentForm.timestamp = `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()} ${now.getHours()}:${now.getMinutes()}`;
      this.subComments.push({...this.subCommentForm}); // 添加评论到时间线
      this.subCommentForm.content = ''; // 重置评论内容
      this.showSubCommentDailog = false; // 关闭对话框
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 改变tree节点样式
    changeTreeClass() {
      // 找到之前做标记的class
      var classDomList = document.getElementsByClassName('especially')
      // 改变这几个样式
      for (var i = 0; i < classDomList.length; i++) {
        classDomList[i].parentNode.parentNode.style.cssText = 'width: auto;border: none;'
        classDomList[i].parentNode.parentNode.parentNode.style.cssText = 'border: none;'
        classDomList[i].parentNode.parentNode.nextSibling.style.cssText = 'display: none;'
      }
    },
    getAllMenu(){
      menuList({}).then(res => {
        if(res.code === 0) {
          this.allMenu = toTree(res.data);
          console.log(this.allMenu)
        }else {
          this.$message.error(res.message)
        }
      })
    },
    onSubmit() {
      window.location.href = 'Manu'
    },
  },
  created(){
    this.getAllMenu()
  },
}
</script>

<style lang="less">
.el-divider {
  margin: 35px auto;
}
.el-divider span {
  font-size: 17px;
  font-weight: 100;
  color: #000;
}
.el-button {
  margin: 0 10px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.table {
  overflow: auto;
  height: 100%;
  width: 900px;
  margin: 20px;
  border: 1px solid #000000;
}

.table .el-tree .el-tree-node__content {
  padding: 5px 10px !important;
  width: 150px;
  height: auto;
}
.table .el-tree .el-tree-node__content .el-tree-node__expand-icon.el-icon-caret-right {
  display: none;
}
.table .el-tree .el-tree-node {
  padding: 0 !important;
  display: flex;
}
.table .el-tree .el-checkbox.is-disabled.is-checked .el-checkbox__inner {
  background-color: #363554 !important;
  border-color: #363554 !important;
}
.table .el-tree .el-tree-node__children {
  display: flex;
  flex-direction: column;
}
.table .el-tree .el-tree-node__children .el-tree-node {
  display: flex;
  padding: 0px !important;
  border-bottom: 1px #545454 solid;
}
.table .el-tree .el-tree-node__children .el-tree-node .el-tree-node__content {
  width: 200px;
  border-left: 1px #545454 solid;
  border-bottom: none;
}
.table .el-tree .el-tree-node__children .el-tree-node .el-tree-node__content .custom-tree-node {
  height: 24px;
  display: flex;
  align-items: center;
}
.table .el-tree .el-tree-node__children .el-tree-node .el-tree-node__content .custom-tree-node .tree-btn {
  margin-left: 10px;
  display: none;
}
.table .el-tree .el-tree-node__children .el-tree-node .el-tree-node__content .custom-tree-node .el-button {
  padding: 0px !important;
  border-radius: 4px;
  background: #363554;
  color: #ffffff;
}
.table .el-tree .el-tree-node__children .el-tree-node .el-tree-node__children {
  width: 800px;
  flex-direction: row;
  flex-wrap: wrap;
}
.table .el-tree .el-tree-node__children .el-tree-node.is-checked .tree-btn {
  display: block !important;
}
</style>